<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            keyup事件：
                键盘弹起事件，简单来说就是按了某个键弹起后触发
         -->
        <input type="text" @keyup="fn1">
        <div>以下是用修饰符做</div>

        <!-- 这个弹起只能由回车触发 -->
        <input type="text" @keyup.enter="fn2">

        <!-- 例如如果我想只能由a触发呢？ -->
        <input type="text" @keyup.a="fn2">

        <!-- 空格触发 -->
        <input type="text" @keyup.space="fn2">
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fn1 (e) {
                    // 以前的判断方式 
                    // 缺点1：其实keyCode已经被废弃了
                    // 缺点2：写起来麻烦，还得自己做判断
                    // console.log(e.code)
                    // keyCode最大的问题在于你要记住某个键对应某个码
                    // 例如如果我想判断a触发，那你就得记住a的码对应几（65）
                    if (e.keyCode == 13) {
                        console.log('我按键了')
                    }

                    // 如果用最新标准就应该用
                    // if (e.code == 'Enter') {
                    //     console.log('我按键了')
                    // }
                },

                fn2 () {
                    console.log('我fn2触发了')
                }
            }
        })
    </script>
</body>
</html>